<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.11"/>
<title>ESP8266 ILI9341 display support code with printf sources, wire-frame viewer and custom fonts: vfonts/README.md Source File</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<script type="text/javascript">
  $(document).ready(function() { init_search(); });
</script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td id="projectalign" style="padding-left: 0.5em;">
   <div id="projectname">ESP8266 ILI9341 display support code with printf sources, wire-frame viewer and custom fonts
   &#160;<span id="projectnumber">1.0</span>
   </div>
   <div id="projectbrief">ESP8266ILI9341DisplayProject</div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.11 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "search",false,'Search');
</script>
  <div id="navrow1" class="tabs">
    <ul class="tablist">
      <li><a href="index.html"><span>Main&#160;Page</span></a></li>
      <li><a href="pages.html"><span>Related&#160;Pages</span></a></li>
      <li><a href="annotated.html"><span>Data&#160;Structures</span></a></li>
      <li class="current"><a href="files.html"><span>Files</span></a></li>
      <li>
        <div id="MSearchBox" class="MSearchBoxInactive">
        <span class="left">
          <img id="MSearchSelect" src="search/mag_sel.png"
               onmouseover="return searchBox.OnSearchSelectShow()"
               onmouseout="return searchBox.OnSearchSelectHide()"
               alt=""/>
          <input type="text" id="MSearchField" value="Search" accesskey="S"
               onfocus="searchBox.OnSearchFieldFocus(true)" 
               onblur="searchBox.OnSearchFieldFocus(false)" 
               onkeyup="searchBox.OnSearchFieldChange(event)"/>
          </span><span class="right">
            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>
          </span>
        </div>
      </li>
    </ul>
  </div>
  <div id="navrow2" class="tabs2">
    <ul class="tablist">
      <li><a href="files.html"><span>File&#160;List</span></a></li>
      <li><a href="globals.html"><span>Globals</span></a></li>
    </ul>
  </div>
</div><!-- top -->
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div class="header">
  <div class="headertitle">
<div class="title">vfonts/README.md</div>  </div>
</div><!--header-->
<div class="contents">
<a href="vfonts_2README_8md.html">Go to the documentation of this file.</a><div class="fragment"><div class="line"><a name="l00001"></a><span class="lineno">    1</span>&#160;font_to_svg</div><div class="line"><a name="l00002"></a><span class="lineno">    2</span>&#160;===========</div><div class="line"><a name="l00003"></a><span class="lineno">    3</span>&#160;</div><div class="line"><a name="l00004"></a><span class="lineno">    4</span>&#160;This code will convert a single character in a TrueType(R) font file </div><div class="line"><a name="l00005"></a><span class="lineno">    5</span>&#160;into an SVG &#39;path&#39; shape.</div><div class="line"><a name="l00006"></a><span class="lineno">    6</span>&#160;</div><div class="line"><a name="l00007"></a><span class="lineno">    7</span>&#160;### basic usage:</div><div class="line"><a name="l00008"></a><span class="lineno">    8</span>&#160;</div><div class="line"><a name="l00009"></a><span class="lineno">    9</span>&#160;Let&#39;s say you have a TrueType font file, such as the popular </div><div class="line"><a name="l00010"></a><span class="lineno">   10</span>&#160;FreeSans.ttf. Let&#39;s pull out the path information for the letter &quot;B&quot; and </div><div class="line"><a name="l00011"></a><span class="lineno">   11</span>&#160;transform it into SVG. A simple C++ program code like the following can </div><div class="line"><a name="l00012"></a><span class="lineno">   12</span>&#160;do that.</div><div class="line"><a name="l00013"></a><span class="lineno">   13</span>&#160;</div><div class="line"><a name="l00014"></a><span class="lineno">   14</span>&#160;    #include &lt;font_to_svg.hpp&gt;</div><div class="line"><a name="l00015"></a><span class="lineno">   15</span>&#160;    int main()</div><div class="line"><a name="l00016"></a><span class="lineno">   16</span>&#160;    {</div><div class="line"><a name="l00017"></a><span class="lineno">   17</span>&#160;        font_to_svg::glyph g( &quot;FreeSans.ttf&quot;, 66 );</div><div class="line"><a name="l00018"></a><span class="lineno">   18</span>&#160;        std::cout &lt;&lt; g.outline();</div><div class="line"><a name="l00019"></a><span class="lineno">   19</span>&#160;    }</div><div class="line"><a name="l00020"></a><span class="lineno">   20</span>&#160;</div><div class="line"><a name="l00021"></a><span class="lineno">   21</span>&#160;Compile and run, and the program will generate an SVG path out of the </div><div class="line"><a name="l00022"></a><span class="lineno">   22</span>&#160;TrueType information for the character of Unicode U+0066 (the Latin </div><div class="line"><a name="l00023"></a><span class="lineno">   23</span>&#160;letter B), something like this:</div><div class="line"><a name="l00024"></a><span class="lineno">   24</span>&#160;</div><div class="line"><a name="l00025"></a><span class="lineno">   25</span>&#160;    &lt;svg&gt;</div><div class="line"><a name="l00026"></a><span class="lineno">   26</span>&#160;    &lt;path d=&#39;M 591,-180 Q 591,-150 580,-121 Q 569,-92 543,-63 ... Z /&gt;</div><div class="line"><a name="l00027"></a><span class="lineno">   27</span>&#160;    &lt;/svg&gt;</div><div class="line"><a name="l00028"></a><span class="lineno">   28</span>&#160;</div><div class="line"><a name="l00029"></a><span class="lineno">   29</span>&#160;&#39;M&#39; is &#39;move to&#39;, and &#39;Q&#39; is for Bezier curves. Open the resulting .svg </div><div class="line"><a name="l00030"></a><span class="lineno">   30</span>&#160;file in a web browser and you get something like this:</div><div class="line"><a name="l00031"></a><span class="lineno">   31</span>&#160;</div><div class="line"><a name="l00032"></a><span class="lineno">   32</span>&#160;![Rendering of font glyph](screenshot.png &quot; The Letter B &quot;)</div><div class="line"><a name="l00033"></a><span class="lineno">   33</span>&#160;</div><div class="line"><a name="l00034"></a><span class="lineno">   34</span>&#160;Another example: Floral Heart, Unicode 0x2766:</div><div class="line"><a name="l00035"></a><span class="lineno">   35</span>&#160;</div><div class="line"><a name="l00036"></a><span class="lineno">   36</span>&#160;![Rendering of font glyph](screenshot2.png &quot; Floral Heart &quot;)</div><div class="line"><a name="l00037"></a><span class="lineno">   37</span>&#160;</div><div class="line"><a name="l00038"></a><span class="lineno">   38</span>&#160;### Current Status</div><div class="line"><a name="l00039"></a><span class="lineno">   39</span>&#160;</div><div class="line"><a name="l00040"></a><span class="lineno">   40</span>&#160;This project has some bugs but will handle &#39;standard&#39; fonts reasonably well.</div><div class="line"><a name="l00041"></a><span class="lineno">   41</span>&#160;</div><div class="line"><a name="l00042"></a><span class="lineno">   42</span>&#160;Currently this project consists of a C++ language header that can used </div><div class="line"><a name="l00043"></a><span class="lineno">   43</span>&#160;in conjuction with the Freetype library to create a basic conversion </div><div class="line"><a name="l00044"></a><span class="lineno">   44</span>&#160;program that will extract a single character from a .ttf file and create </div><div class="line"><a name="l00045"></a><span class="lineno">   45</span>&#160;a matching .svg file.</div><div class="line"><a name="l00046"></a><span class="lineno">   46</span>&#160;</div><div class="line"><a name="l00047"></a><span class="lineno">   47</span>&#160;The program is stable for basic use. It can output plain glyph shapes or </div><div class="line"><a name="l00048"></a><span class="lineno">   48</span>&#160;it can also output &#39;debugging&#39; information like the node points &amp; lines. </div><div class="line"><a name="l00049"></a><span class="lineno">   49</span>&#160;There are some bugs with bounding boxes and other &#39;typographic box&#39; </div><div class="line"><a name="l00050"></a><span class="lineno">   50</span>&#160;issues like Bearing. Also calculation of the SVG &quot;g&quot; tag has some issues </div><div class="line"><a name="l00051"></a><span class="lineno">   51</span>&#160;with transforms/footers.</div><div class="line"><a name="l00052"></a><span class="lineno">   52</span>&#160;</div><div class="line"><a name="l00053"></a><span class="lineno">   53</span>&#160;The code does not currently support OpenType or it&#39;s features, such as </div><div class="line"><a name="l00054"></a><span class="lineno">   54</span>&#160;ligatures. It does not support creating an &quot;SVG Font&quot;. It only does very </div><div class="line"><a name="l00055"></a><span class="lineno">   55</span>&#160;basic conversion of Truetype glyphs to SVG path shapes. It might not </div><div class="line"><a name="l00056"></a><span class="lineno">   56</span>&#160;be useful for web fonts or other usages. </div><div class="line"><a name="l00057"></a><span class="lineno">   57</span>&#160;</div><div class="line"><a name="l00058"></a><span class="lineno">   58</span>&#160;### More example programs</div><div class="line"><a name="l00059"></a><span class="lineno">   59</span>&#160;</div><div class="line"><a name="l00060"></a><span class="lineno">   60</span>&#160;There are several example programs included. They use the cmake build </div><div class="line"><a name="l00061"></a><span class="lineno">   61</span>&#160;system ( http://www.cmake.org ). For example:</div><div class="line"><a name="l00062"></a><span class="lineno">   62</span>&#160;     </div><div class="line"><a name="l00063"></a><span class="lineno">   63</span>&#160;     cmake .</div><div class="line"><a name="l00064"></a><span class="lineno">   64</span>&#160;     make</div><div class="line"><a name="l00065"></a><span class="lineno">   65</span>&#160;     ./example1 `locate tahoma.ttf` 66 &gt; out.svg </div><div class="line"><a name="l00066"></a><span class="lineno">   66</span>&#160;     firefox out.svg</div><div class="line"><a name="l00067"></a><span class="lineno">   67</span>&#160;</div><div class="line"><a name="l00068"></a><span class="lineno">   68</span>&#160;Example 1 and Example 2 just do basic output of a single character into </div><div class="line"><a name="l00069"></a><span class="lineno">   69</span>&#160;a .svg path. The first argument is a truetype font filename, and the </div><div class="line"><a name="l00070"></a><span class="lineno">   70</span>&#160;second argument is a Unicode codepoint number. For example:</div><div class="line"><a name="l00071"></a><span class="lineno">   71</span>&#160;</div><div class="line"><a name="l00072"></a><span class="lineno">   72</span>&#160;    ./example2 ./FreeSerif.ttf 66 &gt; example2.svg </div><div class="line"><a name="l00073"></a><span class="lineno">   73</span>&#160;</div><div class="line"><a name="l00074"></a><span class="lineno">   74</span>&#160;In the line above, 66 = unicode/ascii for the letter &#39;B&#39;. You can use </div><div class="line"><a name="l00075"></a><span class="lineno">   75</span>&#160;hexadecimal numbers as well. For example, the Cherokee Letter O has </div><div class="line"><a name="l00076"></a><span class="lineno">   76</span>&#160;hexadecimal Unicode point 0x13A3:</div><div class="line"><a name="l00077"></a><span class="lineno">   77</span>&#160;</div><div class="line"><a name="l00078"></a><span class="lineno">   78</span>&#160;    ./example1 ./FreeSerif.ttf 0x13A3 &gt; example2.cho.svg</div><div class="line"><a name="l00079"></a><span class="lineno">   79</span>&#160;</div><div class="line"><a name="l00080"></a><span class="lineno">   80</span>&#160;To view the resulting svg file, it is easiest to use a browswer like </div><div class="line"><a name="l00081"></a><span class="lineno">   81</span>&#160;Firefox. Go to &#39;file/open&#39; and point it to your output file. Or type </div><div class="line"><a name="l00082"></a><span class="lineno">   82</span>&#160;something like &#39;file:///tmp/x.svg&#39; into your address bar. You can also </div><div class="line"><a name="l00083"></a><span class="lineno">   83</span>&#160;get the Firefox addon that can auto-reload files when they change on </div><div class="line"><a name="l00084"></a><span class="lineno">   84</span>&#160;disk.</div><div class="line"><a name="l00085"></a><span class="lineno">   85</span>&#160;</div><div class="line"><a name="l00086"></a><span class="lineno">   86</span>&#160;Another option is to use svg view/edit programs like Inkscape.</div><div class="line"><a name="l00087"></a><span class="lineno">   87</span>&#160;</div><div class="line"><a name="l00088"></a><span class="lineno">   88</span>&#160;Example 3 was created by github user Ebraminio to generate multiple .svg </div><div class="line"><a name="l00089"></a><span class="lineno">   89</span>&#160;files from a single GPL font of ancient Persian letters ( Xerxes.ttf, </div><div class="line"><a name="l00090"></a><span class="lineno">   90</span>&#160;available by a web search )</div><div class="line"><a name="l00091"></a><span class="lineno">   91</span>&#160;</div><div class="line"><a name="l00092"></a><span class="lineno">   92</span>&#160;### Detail on using in your own project</div><div class="line"><a name="l00093"></a><span class="lineno">   93</span>&#160;</div><div class="line"><a name="l00094"></a><span class="lineno">   94</span>&#160;As noted, font_to_svg is a &#39;header library&#39; so you dont need to </div><div class="line"><a name="l00095"></a><span class="lineno">   95</span>&#160;compile any libraries just include the header and use it. You will still </div><div class="line"><a name="l00096"></a><span class="lineno">   96</span>&#160;need to link to Freetype however, using your build system.</div><div class="line"><a name="l00097"></a><span class="lineno">   97</span>&#160;</div><div class="line"><a name="l00098"></a><span class="lineno">   98</span>&#160;Freetype&#39;s website is here: http://www.freetype.org/</div><div class="line"><a name="l00099"></a><span class="lineno">   99</span>&#160;</div><div class="line"><a name="l00100"></a><span class="lineno">  100</span>&#160;font_to_svg uses freetype to deal with vaguaries and variations of </div><div class="line"><a name="l00101"></a><span class="lineno">  101</span>&#160;Truetype file formats. font_to_svg does not use any of Freetype&#39;s bitmap </div><div class="line"><a name="l00102"></a><span class="lineno">  102</span>&#160;font-rendering code. font_to_svg is a pure &quot;outline curve&quot; renderer to be </div><div class="line"><a name="l00103"></a><span class="lineno">  103</span>&#160;used for vector/curve based output.</div><div class="line"><a name="l00104"></a><span class="lineno">  104</span>&#160;</div><div class="line"><a name="l00105"></a><span class="lineno">  105</span>&#160;Font_to_svg comes with a very permissive BSD style copyright license </div><div class="line"><a name="l00106"></a><span class="lineno">  106</span>&#160;described in the LICENSE file in this distribution. Acknowledgment in </div><div class="line"><a name="l00107"></a><span class="lineno">  107</span>&#160;the product documentation would be appreciated but is not required.</div><div class="line"><a name="l00108"></a><span class="lineno">  108</span>&#160;</div><div class="line"><a name="l00109"></a><span class="lineno">  109</span>&#160;To understand the usage, look at the files named &#39;example*.cpp&#39; that come</div><div class="line"><a name="l00110"></a><span class="lineno">  110</span>&#160;with the source code. You can output the bare svg path data, or a bunch</div><div class="line"><a name="l00111"></a><span class="lineno">  111</span>&#160;of debugging information.</div><div class="line"><a name="l00112"></a><span class="lineno">  112</span>&#160;</div><div class="line"><a name="l00113"></a><span class="lineno">  113</span>&#160;Don&#39;t forget that some fonts have restrictive copyright licenses that </div><div class="line"><a name="l00114"></a><span class="lineno">  114</span>&#160;forbid this type of conversion. You can use fonts from </div><div class="line"><a name="l00115"></a><span class="lineno">  115</span>&#160;http://openfontlibrary.org If you want to be safe from accusations of </div><div class="line"><a name="l00116"></a><span class="lineno">  116</span>&#160;copyright violation.</div><div class="line"><a name="l00117"></a><span class="lineno">  117</span>&#160;</div><div class="line"><a name="l00118"></a><span class="lineno">  118</span>&#160;### Finding cool Unicode points</div><div class="line"><a name="l00119"></a><span class="lineno">  119</span>&#160;</div><div class="line"><a name="l00120"></a><span class="lineno">  120</span>&#160;http://www.fileformat.info/info/unicode/block/index.htm</div><div class="line"><a name="l00121"></a><span class="lineno">  121</span>&#160;</div><div class="line"><a name="l00122"></a><span class="lineno">  122</span>&#160;### How does Truetype actually work then? How does this program work?</div><div class="line"><a name="l00123"></a><span class="lineno">  123</span>&#160;</div><div class="line"><a name="l00124"></a><span class="lineno">  124</span>&#160;Truetype fonts consist of a group of characters layed out in a file. The </div><div class="line"><a name="l00125"></a><span class="lineno">  125</span>&#160;truetype file format is very complicated, with various issues related to </div><div class="line"><a name="l00126"></a><span class="lineno">  126</span>&#160;character sets, glyph indexes, duplicated positions, etc etc etc. font_to_svg </div><div class="line"><a name="l00127"></a><span class="lineno">  127</span>&#160;uses the Freetype library to make it easy to deal with those problems </div><div class="line"><a name="l00128"></a><span class="lineno">  128</span>&#160;and to load the file into memory.</div><div class="line"><a name="l00129"></a><span class="lineno">  129</span>&#160;</div><div class="line"><a name="l00130"></a><span class="lineno">  130</span>&#160;Each character in the Truetype file has a sequence of &#39;contours&#39;, which </div><div class="line"><a name="l00131"></a><span class="lineno">  131</span>&#160;are basically a sequence of curves and lines that form a single shape. </div><div class="line"><a name="l00132"></a><span class="lineno">  132</span>&#160;Some contours count as the &#39;body&#39; of the letter, while others are the </div><div class="line"><a name="l00133"></a><span class="lineno">  133</span>&#160;&#39;holes&#39; of a letter. The letter &#39;B&#39; for example has a single contour for </div><div class="line"><a name="l00134"></a><span class="lineno">  134</span>&#160;the &#39;outside&#39; shape, and two &#39;hole&#39; contours for the two inside shapes.</div><div class="line"><a name="l00135"></a><span class="lineno">  135</span>&#160;</div><div class="line"><a name="l00136"></a><span class="lineno">  136</span>&#160;Truetype marks these contours in a special way - by the &#39;clockwise&#39; ness </div><div class="line"><a name="l00137"></a><span class="lineno">  137</span>&#160;of the order in which it lists the points that make up a contour. The </div><div class="line"><a name="l00138"></a><span class="lineno">  138</span>&#160;contours that have their points in &#39;clockwise&#39; order are considered </div><div class="line"><a name="l00139"></a><span class="lineno">  139</span>&#160;&#39;solid&#39; The contours that have their points listed in &#39;counter </div><div class="line"><a name="l00140"></a><span class="lineno">  140</span>&#160;clockwise&#39; (also called &#39;anti-clockwise&#39;) order are considered &#39;holes&#39;. </div><div class="line"><a name="l00141"></a><span class="lineno">  141</span>&#160;For example, imagine the letter &#39;o&#39;. The points making up the &#39;outside&#39; </div><div class="line"><a name="l00142"></a><span class="lineno">  142</span>&#160;contour are listed in clockwise order, while the points making up the </div><div class="line"><a name="l00143"></a><span class="lineno">  143</span>&#160;&#39;inside&#39; contour are listed in counter-clockwise order.</div><div class="line"><a name="l00144"></a><span class="lineno">  144</span>&#160;</div><div class="line"><a name="l00145"></a><span class="lineno">  145</span>&#160;But what type of points make up a contour? They are simple 2-dimensional </div><div class="line"><a name="l00146"></a><span class="lineno">  146</span>&#160;Cartesian points with integer coordinates. The points for a contour are </div><div class="line"><a name="l00147"></a><span class="lineno">  147</span>&#160;listed in order in the Truetype file. The curves and lines of a contour </div><div class="line"><a name="l00148"></a><span class="lineno">  148</span>&#160;are drawn between the points using the rules of Bezier Curves. This </div><div class="line"><a name="l00149"></a><span class="lineno">  149</span>&#160;means there are actually two different types of points - &#39;on the curve&#39; </div><div class="line"><a name="l00150"></a><span class="lineno">  150</span>&#160;points and &#39;off the curve&#39; points. The &#39;on the curve&#39; points actually </div><div class="line"><a name="l00151"></a><span class="lineno">  151</span>&#160;have lines or curves coming out of them and/or touching them. &#39;Off the curve&#39;</div><div class="line"><a name="l00152"></a><span class="lineno">  152</span>&#160;curves represent the &#39;control&#39; points between the &#39;on the curve&#39; points.</div><div class="line"><a name="l00153"></a><span class="lineno">  153</span>&#160;</div><div class="line"><a name="l00154"></a><span class="lineno">  154</span>&#160;Now, Truetype doesn&#39;t just use any old Bezier curve. It uses a type of </div><div class="line"><a name="l00155"></a><span class="lineno">  155</span>&#160;Bezier called &#39;Quadratic&#39;, which consists of two endpoints &#39;on the </div><div class="line"><a name="l00156"></a><span class="lineno">  156</span>&#160;curve&#39; and one &#39;control point&#39;. If you check the Wikipedia article for </div><div class="line"><a name="l00157"></a><span class="lineno">  157</span>&#160;Bezier Curve, http://en.wikipedia.org/wiki/B%C3%A9zier_curve , you can see simple animated examples. </div><div class="line"><a name="l00158"></a><span class="lineno">  158</span>&#160;</div><div class="line"><a name="l00159"></a><span class="lineno">  159</span>&#160;In this example, p0 is &#39;on the curve&#39;, p2 is also &#39;on the curve&#39;, but</div><div class="line"><a name="l00160"></a><span class="lineno">  160</span>&#160;p1 is &#39;off the curve&#39;. In other words, p1 is a &#39;control point&#39;.</div><div class="line"><a name="l00161"></a><span class="lineno">  161</span>&#160;</div><div class="line"><a name="l00162"></a><span class="lineno">  162</span>&#160;![Bezier.gif](bezier.gif &quot; The Letter B &quot;)</div><div class="line"><a name="l00163"></a><span class="lineno">  163</span>&#160;</div><div class="line"><a name="l00164"></a><span class="lineno">  164</span>&#160;The math is not actually as complicated as it looks on the wiki page- </div><div class="line"><a name="l00165"></a><span class="lineno">  165</span>&#160;you can draw a Bezier Quadratic using only a ruler and a pencil. I.E. </div><div class="line"><a name="l00166"></a><span class="lineno">  166</span>&#160;you can actually do it without any transcendental functions or </div><div class="line"><a name="l00167"></a><span class="lineno">  167</span>&#160;complicated algebra, just using simple ratios and integer math. But I </div><div class="line"><a name="l00168"></a><span class="lineno">  168</span>&#160;digress.</div><div class="line"><a name="l00169"></a><span class="lineno">  169</span>&#160;</div><div class="line"><a name="l00170"></a><span class="lineno">  170</span>&#160;Now... in Truetype there is a special feature in the way off-curve </div><div class="line"><a name="l00171"></a><span class="lineno">  171</span>&#160;points are listed. If two are listed in a row, then there is actually a </div><div class="line"><a name="l00172"></a><span class="lineno">  172</span>&#160;&#39;hidden&#39; or &#39;implied&#39; on-curve point at a position exactly halfway </div><div class="line"><a name="l00173"></a><span class="lineno">  173</span>&#160;between them. font_to_svg does not draw these points but they are easy to imagine</div><div class="line"><a name="l00174"></a><span class="lineno">  174</span>&#160;when looking at the debug code. </div><div class="line"><a name="l00175"></a><span class="lineno">  175</span>&#160;</div><div class="line"><a name="l00176"></a><span class="lineno">  176</span>&#160;Now. How does font_to_svg do SVG output? It basically just copies the point </div><div class="line"><a name="l00177"></a><span class="lineno">  177</span>&#160;and contour information in the TrueType file and splits it into SVG </div><div class="line"><a name="l00178"></a><span class="lineno">  178</span>&#160;paths. The actual rendering of the SVG file to something on a computer </div><div class="line"><a name="l00179"></a><span class="lineno">  179</span>&#160;screen is left to the SVG rendering programs, like web browsers or </div><div class="line"><a name="l00180"></a><span class="lineno">  180</span>&#160;Inkscape. The most complicated thing that these renderers do is probably </div><div class="line"><a name="l00181"></a><span class="lineno">  181</span>&#160;the &quot;non-zero winding rule&quot;, which is a geometry rule that determines </div><div class="line"><a name="l00182"></a><span class="lineno">  182</span>&#160;how to properly draw the &#39;holes&#39; and &#39;body&#39; contours of a character </div><div class="line"><a name="l00183"></a><span class="lineno">  183</span>&#160;glyph. font_to_svg doesn&#39;t have to worry about that either - it just inserts </div><div class="line"><a name="l00184"></a><span class="lineno">  184</span>&#160;the svg property &#39;non-zero&#39; fill-type into the generated SVG and the SVG </div><div class="line"><a name="l00185"></a><span class="lineno">  185</span>&#160;renderer should take care of the rest.</div><div class="line"><a name="l00186"></a><span class="lineno">  186</span>&#160;</div><div class="line"><a name="l00187"></a><span class="lineno">  187</span>&#160;Please see these sites for more info.</div><div class="line"><a name="l00188"></a><span class="lineno">  188</span>&#160;</div><div class="line"><a name="l00189"></a><span class="lineno">  189</span>&#160; * Basic Terms: http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html</div><div class="line"><a name="l00190"></a><span class="lineno">  190</span>&#160; * FType + outlines: http://www.freetype.org/freetype2/docs/reference/ft2-outline_processing.html</div><div class="line"><a name="l00191"></a><span class="lineno">  191</span>&#160; * FType + contours: http://www.freetype.org/freetype2/docs/glyphs/glyphs-6.html</div><div class="line"><a name="l00192"></a><span class="lineno">  192</span>&#160; * TType contours: https://developer.apple.com/fonts/TTRefMan/RM01/Chap1.html</div><div class="line"><a name="l00193"></a><span class="lineno">  193</span>&#160; * TType contours2: http://www.truetype-typography.com/ttoutln.htm</div><div class="line"><a name="l00194"></a><span class="lineno">  194</span>&#160; * Non-zero winding rule: http://en.wikipedia.org/wiki/Nonzero-rule</div><div class="line"><a name="l00195"></a><span class="lineno">  195</span>&#160; * SVG paths: http://www.w3schools.com/svg/svg_path.asp</div><div class="line"><a name="l00196"></a><span class="lineno">  196</span>&#160; * SVG paths + nonzero: http://www.w3.org/TR/SVG/painting.html#FillProperties</div><div class="line"><a name="l00197"></a><span class="lineno">  197</span>&#160;</div><div class="line"><a name="l00198"></a><span class="lineno">  198</span>&#160;### What about rendering multiple characters?</div><div class="line"><a name="l00199"></a><span class="lineno">  199</span>&#160;</div><div class="line"><a name="l00200"></a><span class="lineno">  200</span>&#160;To do this properly for all languages, you actually need a &#39;layout </div><div class="line"><a name="l00201"></a><span class="lineno">  201</span>&#160;engine&#39;, like Harfbuzz and/or Pango. These are at present, far beyond </div><div class="line"><a name="l00202"></a><span class="lineno">  202</span>&#160;the scope of this project. </div><div class="line"><a name="l00203"></a><span class="lineno">  203</span>&#160;</div><div class="line"><a name="l00204"></a><span class="lineno">  204</span>&#160;It may be possible to render strings of characters in &#39;non-connected&#39; </div><div class="line"><a name="l00205"></a><span class="lineno">  205</span>&#160;scripts, for example English ( Latin alphabet), or Chinese, using the </div><div class="line"><a name="l00206"></a><span class="lineno">  206</span>&#160;basic bounding box information. However this library, at present, is </div><div class="line"><a name="l00207"></a><span class="lineno">  207</span>&#160;probably not very suitable for ligature + combination scripts like </div><div class="line"><a name="l00208"></a><span class="lineno">  208</span>&#160;Arabic or Devanagari.</div><div class="line"><a name="l00209"></a><span class="lineno">  209</span>&#160;</div><div class="line"><a name="l00210"></a><span class="lineno">  210</span>&#160;### Test characters</div><div class="line"><a name="l00211"></a><span class="lineno">  211</span>&#160;</div><div class="line"><a name="l00212"></a><span class="lineno">  212</span>&#160;Nice characters that show unusual patterns. Good for testing.</div><div class="line"><a name="l00213"></a><span class="lineno">  213</span>&#160;</div><div class="line"><a name="l00214"></a><span class="lineno">  214</span>&#160;    ./example1 FreeSerif.ttf 67 &gt; xa67.svg</div><div class="line"><a name="l00215"></a><span class="lineno">  215</span>&#160;    ./example1 FreeSerif.ttf 68 &gt; xa68.svg</div><div class="line"><a name="l00216"></a><span class="lineno">  216</span>&#160;    ./example1 FreeSerif.ttf 0x2766 &gt; x2766.svg</div><div class="line"><a name="l00217"></a><span class="lineno">  217</span>&#160;    ./example1 FreeSerif.ttf 0x2767 &gt; x2767.svg</div><div class="line"><a name="l00218"></a><span class="lineno">  218</span>&#160;    ./example1 FreeSerif.ttf 0x1f01a &gt; x1f01a.svg</div><div class="line"><a name="l00219"></a><span class="lineno">  219</span>&#160;    ./example1 FreeSerif.ttf 0x48007 &gt; x48007.svg</div><div class="line"><a name="l00220"></a><span class="lineno">  220</span>&#160;</div><div class="line"><a name="l00221"></a><span class="lineno">  221</span>&#160;### Other projects</div><div class="line"><a name="l00222"></a><span class="lineno">  222</span>&#160;</div><div class="line"><a name="l00223"></a><span class="lineno">  223</span>&#160;Sean Barret&#39;s amazing TTF parser + renderer:</div><div class="line"><a name="l00224"></a><span class="lineno">  224</span>&#160;https://github.com/nothings/stb/blob/master/stb_truetype.h</div><div class="line"><a name="l00225"></a><span class="lineno">  225</span>&#160;</div><div class="line"><a name="l00226"></a><span class="lineno">  226</span>&#160;The &quot;Batik&quot; project does similar stuff. It is Java:</div><div class="line"><a name="l00227"></a><span class="lineno">  227</span>&#160;</div><div class="line"><a name="l00228"></a><span class="lineno">  228</span>&#160;http://xmlgraphics.apache.org/batik/tools/font-converter.html</div><div class="line"><a name="l00229"></a><span class="lineno">  229</span>&#160;</div><div class="line"><a name="l00230"></a><span class="lineno">  230</span>&#160;### Finding A Unicode font</div><div class="line"><a name="l00231"></a><span class="lineno">  231</span>&#160;</div><div class="line"><a name="l00232"></a><span class="lineno">  232</span>&#160;An easy resource is here:</div><div class="line"><a name="l00233"></a><span class="lineno">  233</span>&#160;</div><div class="line"><a name="l00234"></a><span class="lineno">  234</span>&#160;http://openfontlibrary.org</div><div class="line"><a name="l00235"></a><span class="lineno">  235</span>&#160;</div><div class="line"><a name="l00236"></a><span class="lineno">  236</span>&#160;If you have linux, you can explore as follows:</div><div class="line"><a name="l00237"></a><span class="lineno">  237</span>&#160;</div><div class="line"><a name="l00238"></a><span class="lineno">  238</span>&#160;Run &#39;charmap&#39;, under ubuntu, and then right click on interesting looking </div><div class="line"><a name="l00239"></a><span class="lineno">  239</span>&#160;glyphs. It will give you some rough idea of the font name.</div><div class="line"><a name="l00240"></a><span class="lineno">  240</span>&#160;</div><div class="line"><a name="l00241"></a><span class="lineno">  241</span>&#160;Then do &#39;locate ttf | grep ttf$&#39; which will give a list of all Truetype </div><div class="line"><a name="l00242"></a><span class="lineno">  242</span>&#160;font files (w .ttf extensions) on your system .</div><div class="line"><a name="l00243"></a><span class="lineno">  243</span>&#160;</div><div class="line"><a name="l00244"></a><span class="lineno">  244</span>&#160;You can match this up with what you did in Charmap, then maybe you can find</div><div class="line"><a name="l00245"></a><span class="lineno">  245</span>&#160;the truetype you are looking for. </div><div class="line"><a name="l00246"></a><span class="lineno">  246</span>&#160;</div><div class="line"><a name="l00247"></a><span class="lineno">  247</span>&#160;### Linux non-cmake build</div><div class="line"><a name="l00248"></a><span class="lineno">  248</span>&#160;</div><div class="line"><a name="l00249"></a><span class="lineno">  249</span>&#160;    # BSD/Linux - </div><div class="line"><a name="l00250"></a><span class="lineno">  250</span>&#160;</div><div class="line"><a name="l00251"></a><span class="lineno">  251</span>&#160;    # install freetype using your package manager</div><div class="line"><a name="l00252"></a><span class="lineno">  252</span>&#160;    # (something like sudo apt-get install libfreetype6-dev)</div><div class="line"><a name="l00253"></a><span class="lineno">  253</span>&#160;    # then copy a .ttf file to this directory for convenience</div><div class="line"><a name="l00254"></a><span class="lineno">  254</span>&#160;    cp `locate FreeSerif.ttf | tail -1 ` .</div><div class="line"><a name="l00255"></a><span class="lineno">  255</span>&#160;    ./build.sh</div><div class="line"><a name="l00256"></a><span class="lineno">  256</span>&#160;    ./example1 ./FreeSerif.ttf 66 &gt; /tmp/x.svg </div><div class="line"><a name="l00257"></a><span class="lineno">  257</span>&#160;    firefox /tmp/x.svg</div><div class="line"><a name="l00258"></a><span class="lineno">  258</span>&#160;</div><div class="line"><a name="l00259"></a><span class="lineno">  259</span>&#160;### font_to_svg2.hpp</div><div class="line"><a name="l00260"></a><span class="lineno">  260</span>&#160;</div><div class="line"><a name="l00261"></a><span class="lineno">  261</span>&#160;@willzyba patched up the font_to_svg.hpp file, it is available as a more</div><div class="line"><a name="l00262"></a><span class="lineno">  262</span>&#160;up-to-date alternative called font_to_svg2.hpp for your experimentation.</div><div class="line"><a name="l00263"></a><span class="lineno">  263</span>&#160;It is theoretically faster and easier to use, but contains less debug info. </div><div class="line"><a name="l00264"></a><span class="lineno">  264</span>&#160;</div><div class="line"><a name="l00265"></a><span class="lineno">  265</span>&#160;### Todo</div><div class="line"><a name="l00266"></a><span class="lineno">  266</span>&#160;</div><div class="line"><a name="l00267"></a><span class="lineno">  267</span>&#160;get real name of glyph (like unicode name)</div><div class="line"><a name="l00268"></a><span class="lineno">  268</span>&#160;</div><div class="line"><a name="l00269"></a><span class="lineno">  269</span>&#160;investigate linux&#39;s auto-finding of unicode glyphs</div><div class="line"><a name="l00270"></a><span class="lineno">  270</span>&#160;</div><div class="line"><a name="l00271"></a><span class="lineno">  271</span>&#160;auto-find fonts on linux, not require cmdline fontname?</div><div class="line"><a name="l00272"></a><span class="lineno">  272</span>&#160;</div><div class="line"><a name="l00273"></a><span class="lineno">  273</span>&#160;accept U+4034 (hex) input format</div><div class="line"><a name="l00274"></a><span class="lineno">  274</span>&#160;</div><div class="line"><a name="l00275"></a><span class="lineno">  275</span>&#160;regression test</div><div class="line"><a name="l00276"></a><span class="lineno">  276</span>&#160;</div><div class="line"><a name="l00277"></a><span class="lineno">  277</span>&#160;Long term - opentype? pango / harfbuzz?</div><div class="line"><a name="l00278"></a><span class="lineno">  278</span>&#160;</div><div class="line"><a name="l00279"></a><span class="lineno">  279</span>&#160;### Trademark disclaimer</div><div class="line"><a name="l00280"></a><span class="lineno">  280</span>&#160;</div><div class="line"><a name="l00281"></a><span class="lineno">  281</span>&#160;TrueType is a trademark of Apple, Inc. This library is not in any way </div><div class="line"><a name="l00282"></a><span class="lineno">  282</span>&#160;affiliated nor endorsed by Apple, Inc. </div><div class="line"><a name="l00283"></a><span class="lineno">  283</span>&#160;</div></div><!-- fragment --></div><!-- contents -->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Wed Jan 31 2018 21:22:16 for ESP8266 ILI9341 display support code with printf sources, wire-frame viewer and custom fonts by &#160;<a href="http://www.doxygen.org/index.html">
<img class="footer" src="doxygen.png" alt="doxygen"/>
</a> 1.8.11
</small></address>
</body>
</html>
